<template>
    <flexBox flex-direction="column"
        style="display: inline-block;border: 1px solid #409eff;border-left: 0;border-right: 0;border-bottom: 0;background-color: #fff;"
        :style="{

        }">
        <div @click="async () => {
            if (show_preChange) {
                show = !show
                emit('show', show)
                show_preChange = false
                return
            }
            show_preChange = true
            await tool.wait(0.3)
            show_preChange = false
        }"
            style="width: 100%;height: 25px;background-color: #409eff20;font-size: 15px;font-weight: bold;padding-left: 10px;line-height: 25px;color: #409eff;position: relative;">
            {{ data.title }}
            <flexBox @click="() => {
                show = !show
                emit('show', show)
            }" style="width: 25px;height: 25px;position: absolute;right: 8px;top: 0;">
                <cIcon title="折叠" v-if="show" size="14px" name="collapse"></cIcon>
                <cIcon title="展开" v-if="!show" size="14px" name="expand"></cIcon>
            </flexBox>
        </div>
        <cControls v-show="show" v-if="data.topControls && data.topControls.length" :data="data.topControls"
            style="width: 100%;min-height:30px;height: 30px;padding: 0 8px;">
        </cControls>
        <cControls v-show="show" v-if="data.top2Controls && data.top2Controls.length" :data="data.top2Controls"
            style="width: 100%;min-height:30px;height: 30px;padding: 0 8px;">
        </cControls>
        <div v-show="show" style="width: 100%;height: 100%;position: relative;">
            <cList :data="data.data" v-if="data.data && data.data.type == 'list'"
                style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;"></cList>
            <!-- <cTable :data="data.data" v-if="data.data && data.data.type == 'table'"
                style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;"></cTable> -->
            <cDataTable :data="data.data" v-if="data.data && data.data.type == 'table'"
                style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;"></cDataTable>
            <cSettings :data="data.data" v-if="data.data && data.data.type == 'settings'"
                style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;"></cSettings>
            <cQuestionPreview :data="data.data" v-if="data.data && data.data.type == 'questionPreview'"
                style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;"></cQuestionPreview>
            <div v-if="data.data && data.data.type == 'form'"
                style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;padding: 4px 8px;">
                <div style="width: 100%;height: 100%;position: relative;">
                    <cForm :builders="data.data.builders" :disabled="data.data.disabled" :read-mode="data.data.readMode"
                        :form="data.data.form" :value="data.data.value" @change="(e) => {
                            try {
                                data.data.callBack(e)
                            } catch (error) {

                            }
                        }" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;"></cForm>
                </div>
            </div>

        </div>
        <cControls v-show="show" v-if="data.bottomControls && data.bottomControls.length" :data="data.bottomControls"
            style="width: 100%;min-height:30px;height: 30px;padding: 0 8px;"></cControls>
    </flexBox>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount, defineEmits } from 'vue';
import flexBox from './flexBox.vue';
import cControls from './cControls.vue';
import cList from './cList.vue'
import cForm from './cForm.vue';
import cTable from './cTable.vue';
import cIcon from './cIcon.vue'
import tool from '../modules/tool'
import cDataTable from './cDataTable.vue';
import cSettings from './cSettings.vue';
import cQuestionPreview from '../serviceComponents/cQuestionPreview.vue';

const show = ref(true)

const show_preChange = ref(false)

const emit = defineEmits(['show'])

const props = defineProps({
    data: {
        type: Object,
        default: {}
    },
    index: {
        type: Number,
        default: -1
    }
})

onMounted(async () => {

})
</script>

<style scoped></style>